<template>
	<view class="page">
		<view class="order-head">
			<view class="order-head-number">需求单号：{{ orderDetail.orderNumber }}</view>
			<view class="order-head-date">{{orderDate}}</view>
			<view class="order-head-status">{{ orderDetail.orderStatus | orderStatusFilter }}</view>
		</view>
		<!-- <view class="order-receive">
			<view class="order-receive-title">收货信息</view>
			<view class="order-receive-orderer">
				<text class="order-receive-orderer-name">{{ orderDetail.orderReceiveName }}</text>
				<text class="order-receive-orderer-phone">{{ orderDetail.orderReceivePhone }}</text>
			</view>
			<view class="order-receive-orderer-address">
				{{ orderDetail.orderReceiveAddress }}
			</view>
		</view> -->
		<view class="order-sender">
			<view class="order-sender-title">发货药房</view>
			<view class="order-sender-box">
				<image class="order-sender-icon" :src="orderDetail.sender.logo"></image>
				<view class="order-sender-info-box">
					<view class="order-sender-orgName">
						<text>{{ orderDetail.sender.orgName }}</text>
						<image src="http://yao.hayzon.com/static/orderDetail/info.png"></image>
					</view>
					<view class="order-sender-infomation">{{ orderDetail.sender.infomation }}</view>
					<view class="order-sender-type">{{ orderDetail.sender.type }}</view>
				</view>
			</view>
		</view>
		<view class="order-prescript">
			<view class="order-prescript-title">处方</view>
			<view class="order-prescript-subtitle">{{ orderDetail.prescriptSubtitle }}</view>
			<view class="order-prescript-detail">
				<view>
					<text v-for="(item,index) in orderDetail.prescript" :key="index">{{ item }}</text>
				</view>
				<view class="order-prescript-pay">购买后即可查看完整处方</view>
			</view>
		</view>
		<!-- <view class="order-end-time">{{ orderDetail.endTime }}后自动关闭</view> -->
		<view class="button">
			<button class="mini-btn" type="default" size="default" @click="submit" >咨询医生</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: {
					orderNumber: "50190730112729290",
					orderDate: "2019年7月30日 11:27",
					orderStatus: "1", //这里应该有对应关系吧？
					orderReceiveName: "李强",
					orderReceivePhone: "13020019540",
					orderReceiveAddress: "北京市海淀区清华东路35号",
					sender: {
						logo: "http://yao.hayzon.com/static/orderDetail/logo.png",
						orgName: "中药饮片-由康美提供",
						infomation: "全国最大重要饮片提供商，17:00前下单当日寄出。",
						type: "传统药材 自己煎煮"
					},
					prescriptSubtitle: "处方组成",
					prescript: ["冬瓜仁  40g", "鱼腥草  20g", "葶苈子  15g", "乌梅  15g", "僵蚕  10g", "辛夷  5g", "白芷  5g", "黄芪  15g", "桂枝  10g", "白芍  10g", "白术  10g","防风  10g","蝉蜕  10g"],
					endTime: "14:47"
				},
				orderDate:""
			}
		},
		filters: {
			orderStatusFilter(value) {
				switch (value) {
					case "1":
						return "待支付";
					default:
						return "待支付";
				}
			}
		},
		onLoad() {
			let that = this;
			let day = new Date();
			// that.orderDate = day.getFullYear() + "年" + day.getMonth() +"月" + day.getDay()+"日  ";
		},
		methods:{
			submit() {
				uni.redirectTo({
					url:"selectDoctor"
				})
			},
			
			
		}
	}
</script>

<style>
	.page {
		background-repeat: no-repeat;
		background-size: cover;
		/* background-image: url("~http://yao.hayzon.com/static/temp/111.png"); */
		height: 100%;
	}

	.order-head {
		margin-top: 10upx;
		padding: 35upx;
		position: relative;
		background-color: #fff;
	}

	.order-head-number {
		font-weight: bold;
		color: #666666;
	}

	.order-head-date {
		color: #999999;
		font-size: 0.8em;
	}

	.order-head-status {
		position: absolute;
		right: 10upx;
		top: 35upx;
		color: #da6b57;
	}

	.order-receive {
		margin-top: 10upx;
		padding: 30upx;
		padding-top: 15upx;
		position: relative;
		background-color: #fff;
	}

	.order-receive-title {
		font-weight: bold;
		color: #333333;
	}

	.order-receive-orderer {
		margin-top: 10upx;
	}

	.order-receive-orderer-name {
		color: #333333;
		margin-right: 35upx;
	}

	.order-receive-orderer-phone {
		font-size: 0.8em;
		letter-spacing: 1px;
	}

	.order-receive-orderer-address {
		color: #a0a0a0;
	}

	.order-sender {
		margin-top: 10upx;
		padding: 30upx;
		padding-top: 15upx;
		position: relative;
		background-color: #fff;
	}

	.order-sender-title {
		font-weight: bold;
		color: #333333;
		font-size: 1.1em;

	}

	.order-sender-box {
		display: flex;
		flex-direction: row;
	}

	.order-sender-icon {
		width: 100upx;
		height: 100upx;
		flex-shrink: 0;
		margin-top: 60upx;
		margin-left: 5upx;
	}

	.order-sender-info-box {
		padding: 20upx;
		padding-top: 25upx;
	}

	.order-sender-orgName {
		font-size: 1.2em;
		color: #333333;
	}

	.order-sender-orgName image {
		width: 30upx;
		height: 30upx;
		vertical-align: text-bottom;
	}

	.order-sender-infomation {
		color: #999999;
		line-height: 1.4;
	}

	.order-sender-type {
		color: #666666;
	}

	.order-prescript {
		margin-top: 10upx;
		padding: 30upx;
		padding-top: 6upx;
		position: relative;
		background-color:#fff;
	}

	.order-prescript-title {
		font-weight: bold;
		color: #333333;
		font-size: 1.1em;
	}

	.order-prescript-subtitle {
		color: #666666;
	}

	.order-prescript-detail {
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("~http://yao.hayzon.com/static/orderDetail/boxBackground.png");
	}

	.order-prescript-detail view:first-child {
		display: flex;
		flex-wrap: wrap;
		padding-top: 20upx;
		padding-left: 50upx;
		padding-bottom:35upx;
	}

	.order-prescript-detail view:first-child text {
		font-size: 1.2em;
		margin-right: 25upx;
		/* font-weight: bold; */
	}

	.order-prescript-pay {
		color: #999999;
		text-align: center;
		line-height: 1.5;
		font-size: 1.1em;
	}

	.order-end-time {
		margin-top:10upx;
		text-align: center;
		color: #999999;
		font-size: 0.7em;
		background-color:#ffffff;
	}
	.order-pay-button{
		margin-top:20upx;
		background-color:#da6b57;
		margin-left:30upx;
		margin-right:30upx;
		line-height:115upx;
		border-radius: 20upx;
		color:#ffffff;
		text-align: center;
		font-size:1.5em;
	}
	.button {
		height: 130upx;
		width: 100%;
		margin-top: 20upx;
	}
	
	.button button {
		width: 90%;
		background-color: #df634d;
		margin-top: 15upx;
		margin-bottom: 15upx;
		color: #FFFFFF
	}
</style>
